<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm
        ref="filterForm"
        :elements="elements"
        noimmediate
        @submit="handleSearch"
        @reset="handleReset"
      />
    </Container>
    <Container height="fill">
      <div class="wraper">
        <Table
          :columns="tableColumns"
          :loading="tableLoading"
          :data="tableData"
          :pagination="{
            total: total,
            current: currentPage,
            pageSize: pageSize,
          }"
          @paginationChange="pageChange"
        >
          <template #caozuo="scope">
            <Tooltip content="查看" icon="icon-chakan" @click="handleDataItem(scope.row)" />
            <Tooltip v-if="scope.row.status === 0" content="审核意见" icon="icon-shenhe" @click="handlerEdit(scope.row)" />
          </template>
        </Table>
      </div>
      <!-- 审核意见、查看 -->
      <Drawer
        :title="title"
        :visible.sync="showDetail"
        width="40%"
        :footer-btns="isCha == 1 ? [
          {
            text: '通过',
            type: 'primary',
            loading: qrLoading,
            trigger: 'submit',
          },
          {
            text: '驳回',
            type: 'info',
            trigger: 'reject',
          }
        ] : [
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel',
          }
        ]"
        @submit="handleSubmit"
        @cancel="handleCancel"
        @reject="handleReject"
      >
        <el-form v-if="showDetail" ref="itemForm" :model="itemForm" :rules="drawerRules" label-width="100px" label-position="right">
          <div style="height: 300px;border-bottom: 1px solid #eee;">
            <el-form-item label="申诉周期：">
              <span>{{ itemForm.periodPull }}</span>
            </el-form-item>
            <el-form-item label="备注：">
              <span>{{ itemForm.appealContent }}</span>
            </el-form-item>
          </div>
          <div style="margin-top: 10px;padding-right: 10px;">
            <el-form-item label="审核人：" prop="auditingName">
              <el-input v-if="isCha === 1" disabled placeholder="请输入审核人" maxlength="40" v-model="itemForm.auditingName"></el-input>
              <span v-else>{{ itemForm.auditingName }}</span>
            </el-form-item>
            <el-form-item label="状态：" v-if="isCha === 0">
              <span>{{ itemForm.statusName }}</span>
            </el-form-item>
            <el-form-item label="审核意见：">
              <el-input 
                v-if="isCha === 1"
                v-model="itemForm.auditingContent"
                type="textarea"
                placeholder="请输入"
                rows="5"
                maxlength="100"
                show-word-limit
                clearable
              />
              <span v-else>{{ itemForm.auditingContent }}</span>
            </el-form-item>
          </div>
        </el-form>
      </Drawer>
    </Container>
  </ContainerGroup>
</template>

<script>
import {
  getAssessmentCyclePull,
  listByPage,
  saveOrUpdate
} from '@/api/weight'
import {
  HISDeptCode
} from '@/api/targetManagement'
import {
  listHospitalArea
} from "@/api/accounting";
export default {
  data() {
    return {
      elements: [
        {
          key: 'cycle',
          label: '周期',
          type: 'select',
          itemLabel: 'periodPull',
          itemValue: 'id',
          hideSelectAll: true,
          options: [],
          value: ''
        },
        {
          key: 'itemDate',
          label: '时间',
          type: 'datePicker',
          format: 'yyyy-MM-dd',
          value: ''
        },
        {
          key: 'courtyardArea',
          label: '院区',
          type: 'select',
          itemLabel: 'name',
          itemValue: 'id',
          hideSelectAll: true,
          options: [],
          value: ''
        },
        {
          key: 'deptCode',
          label: '申诉科室',
          type: 'select',
          itemLabel: 'nameAndCode',
          itemValue: 'code',
          hideSelectAll: true,
          options: [],
          value: ''
        },
        {
          key: 'status',
          label: '状态',
          type: 'select',
          itemLabel: '',
          itemValue: '',
          hideSelectAll: true,
          options: [
          {
              label: '待审核',
              value: 0
            },
            {
              label: '驳回',
              value: 2
            },
            {
              label: '已核对',
              value: 1
            }
          ],
          value: ''
        },
        {
          key: 'complainant',
          label: '申诉人',
          type: 'input',
          value: ''
        }
      ],
      tableColumns: [
        {
          title: '申诉周期',
          dataIndex: 'periodPull'
        },
        {
          title: '申诉人',
          dataIndex: 'appealName'
        },
        {
          title: '申诉科室',
          dataIndex: 'appealDeptName'
        },
        {
          title: '核对科室',
          dataIndex: 'auditingDeptName'
        },
        {
          title: '备注',
          dataIndex: 'appealContent'
        },
        {
          title: '状态',
          dataIndex: 'statusName'
        },
        {
          title: '审核人',
          dataIndex: 'auditingName'
        },
        {
          title: '申诉时间',
          dataIndex: 'appealTime'
        },
        {
          title: '操作',
          dataIndex: 'caozuo',
          type: 'otherTag'
        }
      ],
      tableData: [],
      tableLoading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      newCondition: {},
      title: '',
      qrLoading: false,
      drawerRules: {
        auditingName: [{ required: true, message: '请输入审核人', trigger: 'blur' }]
      },
      optionList: [],
      showDetail: false,
      itemForm: {
        auditingName: JSON.parse(localStorage.userInfo).userName,
        auditingContent: ''
      },
      isCha: 1
    }
  },
  created() {
    this.getSelect()
  },
  methods: {
    getSelect() {
      // 周期
      getAssessmentCyclePull().then((res) => {
        if (res.code === 200) {
          this.elements[0].options = res.data
          const { id } = res.data[0]
          this.elements[0].value = id
          localStorage.setItem(
            'cycle',
            JSON.stringify(this.elements[0].options)
          )
          this.handleSearch(this.$refs.filterForm.getParms())
        } else {
          this.$message.error(res.msg)
        }
      })
      HISDeptCode().then(res => {
        if (res.code === 200) {
          this.elements[3].options = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
      listHospitalArea().then((res) => {
        if (res.code === 200) {
          this.elements[2].options = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 重置
    handleReset() {
      this.handleSearch()
    },
    // 查询
    handleSearch(val) {
      this.newCondition = val
      this.currentPage = 1
      this.getData()
    },
    // 分页
    pageChange(payload) {
      this.currentPage = payload.current
      this.pageSize = payload.pageSize
      this.getData()
    },
    // 数据
    getData() {
      const param = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        assessmentCycleId: this.newCondition?.cycle,
        appealTime: this.newCondition?.itemDate,
        status: this.newCondition?.status,
        appealName: this.newCondition?.complainant,
        appealDept: this.newCondition?.deptCode,
        hospital: this.newCondition?.courtyardArea
      }
      this.tableLoading = true
      listByPage(param).then(res => {
        this.tableLoading = false
        if (res.code === 200) {
          this.tableData = res.data.records
          this.total = res.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 查看
    handleDataItem(row) {
      this.isCha = 0
      this.itemForm = row
      this.title = '查看详情'
      this.showDetail = true
    },
    // 审核意见
    handlerEdit(row) {
      console.log(22222222);
      this.isCha = 1
      this.itemForm = row
      // this.itemForm.auditingContent = row.auditingContent
      this.itemForm.auditingName = JSON.parse(localStorage.userInfo).userName
      this.title = '审核意见'
      this.showDetail = true
    },
    // 审核意见--保存
    handleSubmit() {
      this.$refs["itemForm"].validate((valid) => {
        if (valid) {
          const param = {
            assessmentCycleId: this.itemForm.assessmentCycleId,
            auditingContent: this.itemForm.auditingContent,
            appealContent: this.itemForm.appealContent,
            appealCode: JSON.parse(localStorage.userInfo).userCode,
            appealName: JSON.parse(localStorage.userInfo).userName,
            auditingCode: JSON.parse(localStorage.userInfo).userCode,
            auditingName: JSON.parse(localStorage.userInfo).userName,
            id: this.itemForm.id,
            status: 1
          };
          this.qrLoading = true;
          saveOrUpdate(param).then((res) => {
            this.qrLoading = false;
            if (res.code === 200) {
              this.getData();
              this.handleCancel()
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          console.log("error submit!!!")
          return false
        }
      })
    },
    handleReject() {
      this.$refs["itemForm"].validate((valid) => {
        if (valid) {
          const param = {
            assessmentCycleId: this.itemForm.assessmentCycleId,
            auditingContent: this.itemForm.auditingContent,
            appealContent: this.itemForm.appealContent,
            appealCode: JSON.parse(localStorage.userInfo).userCode,
            appealName: JSON.parse(localStorage.userInfo).userName,
            auditingCode: JSON.parse(localStorage.userInfo).userCode,
            auditingName: JSON.parse(localStorage.userInfo).userName,
            id: this.itemForm.id,
            status: 2
          };
          // param.id = this.currentRow?.id;
          this.qrLoading = true;
          saveOrUpdate(param).then((res) => {
            this.qrLoading = false;
            if (res.code === 200) {
              this.getData();
              this.handleCancel()
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          console.log("error submit!!!")
          return false
        }
      })
    },
    handleCancel() {
      console.log(1111111111);
      this.$refs.itemForm.resetFields()
      this.showDetail = false
    }
  }
}
</script>

<style lang="less" scoped>
.wraper {
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
  .upload-demo {
    .buttons {
      margin: 0px 5px;
      height: 27px;
      margin-top: -1px;
    }
  }
}
/deep/.el-dialog-header {
  padding: 10px 10px 0px 10px;
  padding-bottom: 0px;
}
/deep/.el-dialog-title {
  font-size: 15px;
}
/deep/.el-dialog-headerbtn {
  top: 15px;
}
/deep/.el-dialog-body {
  padding: 10px;
}
.dialog-inherit {
  display: flex;
  flex-direction: row;
  margin: 10px;
  justify-content:right;
}
</style>
